<!--
  * 门店信息
  *
-->
<template>
  <div>
    <a-table :loading="tableLoading" :dataSource="tableData" :scroll="{ x: 'max-content' }" :columns="columns" :pagination="false" rowKey="id" size="small" bordered :row-selection="{ fixed: true }">
      <template #bodyCell="{ text, record, index, column }">
        <!-- <template v-if="column.dataIndex === 'operate'">
          <a-button @click="deleteEmployee(record)" danger type="link">解绑</a-button>
        </template> -->
      </template>
    </a-table>
    <div class="smart-query-table-page">
      <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS" :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit" :total="total" @change="queryData" @showSizeChange="queryData" :show-total="() => `共${total}条`" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { message, Modal } from 'ant-design-vue'
import { reactive, watch } from 'vue'
import { searchApi } from '@/api/search/search-api'
import { useLoadingStore } from '@/store/modules/loading-store'
import { PAGE_SIZE_OPTIONS } from '@/constants/system/common-const'
import { errorSentry } from '@/lib/error-sentry'
import { salesmanApi } from '@/api/business/data/salesman-api'
import { useQuery } from '@/hooks/web/use-query-hook'
const loadingStore = useLoadingStore()

const props = defineProps({
  enterpriseId: {
    type: Number,
    default: null
  }
})

const columns = reactive([
  {
    title: '门店名称',
    dataIndex: 'store_name'
  },
  {
    title: '门店简称',
    dataIndex: 'store_short_name',
    width: 120
  },
  {
    title: '负责人',
    dataIndex: 'contacts'
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    ellipsis: true
  },
  {
    title: '地址',
    dataIndex: 'address',
    ellipsis: true
  },
  {
    title: '所属片区',
    dataIndex: ['region', 'name'],
    width: 80
  }
  // {
  //   title: '操作',
  //   dataIndex: 'operate',
  //   width: 60
  // }
])

// --------------------------- 查询 ---------------------------
const { queryForm, tableData, tableLoading, total, resetQuery, onSearch, queryData, deleteData } = useQuery({
  fetchDataApi: async (params) => {
    const data = {
      ...params,
      salesman_id: props.enterpriseId.id,
      filter: {},
      op: {}
    }
    const res = await searchApi.storeList(data)
    return {
      list: res.data.data,
      total: res.data.total
    }
  },
  queryFormFilter: {},
  queryFormOp: {}
})

// ---------------------------- 解绑 ----------------------------

function deleteEmployee(goodsData) {
  Modal.confirm({
    title: '提示',
    content: '确定要解绑【' + goodsData.store_name + '】吗?',
    okText: '解绑',
    okType: 'danger',
    onOk() {
      singleDelete(goodsData)
    },
    cancelText: '取消',
    onCancel() {}
  })
}

async function singleDelete(goodsData) {
  try {
    loadingStore.show()
    const res = await salesmanApi.unbindSalesman({ id: props.enterpriseId.id, store_id: goodsData.id })
    message.success(res.msg)
    queryData()
  } catch (e) {
    message.error(e.msg)
    errorSentry.captureError(e)
  } finally {
    loadingStore.hide()
  }
}

watch(
  () => props.enterpriseId,
  (e) => {
    if (e) {
      queryData()
    }
  },
  { immediate: true }
)
</script>
